<template>
  <a-card :bordered="false" :body-style='{ padding: 1 }'>
    <div>
      <ul style="list-style: none;">
        <li>
          1111:<a-input placeholder="Basic usage" style="width: 70%" />
        </li>
        <li>
          1111:<a-input placeholder="Basic usage" style="width: 70%" />
        </li>
      </ul>
      <a-button type="primary" style="width: 100%;">Primary</a-button>
    </div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="Tab 1">
        <a-table :rowKey="(record, index) => { return index }" :data-source="data2" :columns="columns2"
          :pagination="SizeOptions" size="small"  :columnWidth="fixed" :scroll="{ x: 1300, y: 500 }"><!-- :scroll="{ x: 0, y: 400 }" -->

          <!-- 列过滤插槽 -->
          <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 0px">
            <a-input v-ant-ref="c => (searchInput = c)" :placeholder="`Search ${column.dataIndex}`"
              :value="selectedKeys[0]" style="width: 188px; margin-bottom: 0px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)" />
            <a-button type="primary" icon="search" size="small" style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
              Search
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              Reset
            </a-button>
          </div>
          <!-- 列过滤插槽 -->

          <!-- 列过滤插槽图标 -->
          <a-icon slot="filterIcon" slot-scope="filtered" type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }" />
          <!-- 列过滤插槽图标 -->

          <!-- 自定义列样式 -->
          <a slot="C1" slot-scope="text, record" @click="toPage()">{{ text }}</a>
          <!-- 自定义列样式 -->
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2" force-render>
        Content of Tab Pane 2
      </a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3">
        Content of Tab Pane 3
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
/* const data = ; */
import TableHelper from '@/utils/helper/TableHelper'


export default {

  data() {
    return {
      data2: [
      ],
      data: [
        {
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          name: 'Joe Black',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          name: 'Jim Green',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
        {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        }, {
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        },
      ],
      SizeOptions: {
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        current: 1,
        pageSize: 20,
        total: 50,
      },
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      columns2: [],
      columns: [
        {
          title: 'Name1',//名称
          dataIndex: 'name',//关联数据的列
          key: 'name',//列唯一标识
          //align: '',//设置列内容的对齐方式	
          ellipsis: true,//超过宽度将自动省略
          width: 30,//列宽
          //fixed: 'left',//列固定
          sorter: (a, b) => a.name.length - b.name.length,//排序函数
          //onFilter: (value, record) => Reflect.get(record,'name').toString().toLowerCase().includes(value.toLowerCase()),//过滤函数
          onFilter: function (value, record) { return Reflect.get(record, 'name').toString().toLowerCase().includes(value.toLowerCase()) },//过滤函数
          /* onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          }, *///列过滤菜单的弹出框是否可见
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            //filterIcon: 'filterIcon',
            customRender: 'name',//插槽slot参数定义的名称
          },//插槽
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          ellipsis: true,
          sorter: (a, b) => a.age - b.age,
          width: 20,//列宽

          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'age',
          },
          onFilter: (value, record) =>
            record.age
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          },
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
          width: 80,//列宽
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.address
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          },
        }, {
          title: 'Address2',
          dataIndex: 'address2',
          key: 'address2',
          ellipsis: true,
          width: 150,//列宽
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.address2
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              });
            }
          },
        },
      ],
    };
  },
  methods: {
    toPage() {
      this.$router.push({ path: '/Base_Manage/Base_Test2/List' });
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      debugger
      confirm();
      /* this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex; */
    },

    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
    },
  },
  mounted() {
    debugger
    var cD = [];
    for (let i = 0; i < 100; i++) {
      let temp = {};
      let temp1 = i;
      for (let j = 0; j < 10; j++) {
        Reflect.defineProperty(temp, 'C' + j, {
          value: 'C' + j + '&R' + temp1,
          writable: true,
          enumerable: true,
          configurable: true

        });
        this.data2.push(temp);
      }

    }
    for (var i = 0; i < 20; i++) {
      cD.push({
        FiledText: 'C' + i,
        FiledName: 'C' + i,
        Id: 'C' + i,
        width: 100,
      });
    }


    this.columns2=TableHelper.get_columns(cD);
    /* cD.forEach((value, index) => {
      debugger
      var temp = {};
      //动态加载列样式
      temp.title = value.title;//列名称
      temp.dataIndex = value.dataIndex;//列索引
      //temp.ellipsis = true,//超过宽度将自动省略
        temp.key = value.key;//列唯一标识
      temp.width = value.width;//列宽
      temp.onFilter = function (value, record) { return Reflect.get(record, temp.dataIndex).toString().toLowerCase().includes(value.toLowerCase()) };//列过滤函数
      temp.onFilterDropdownVisibleChange = visible => { if (visible) { setTimeout(() => { this.searchInput.focus(); }); } };//列过滤查询菜单
      temp.scopedSlots = { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: value.dataIndex.toString() };//插槽slot参数定义的名称
      temp.sorter = function (a, b) { return Reflect.get(a, temp.dataIndex).toString().length - Reflect.get(b, temp.dataIndex).toString().length },//排序函数
        this.columns2.push(temp);
    }); */
  }
};
</script>
<style scoped>
.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}
</style>